<template>
  <div>
    <BasicTable @register="registerTable" />
    <FormDetail @register="registerFormDetail" />
    <ModalWrapper @register="registerCheckBill">
      <template #default="{ data }">
        <CheckBillList :params="data" />
      </template>
    </ModalWrapper>
  </div>
</template>
<script lang="ts" name="CheckBatch" setup>
  import { ref } from "vue"
  import { Auth } from "/@/enums/authEnum"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { usePermission } from "/@/hooks/web/usePermission"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./data"
  import { pageCheckBatch, refreshCheck } from "/@/api/pay"
  import { useMessage } from "/@/hooks/web/useMessage"
  import FormDetail from "./Detail.vue"
  import { useModal, ModalWrapper } from "/@/components/Modal"
  import CheckBillList from "../checkDiff/List.vue"
  import { modalProps } from "ant-design-vue/es/modal/Modal"
  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()
  const [registerCheckBill, { openModal: openCheckBillList }] = useModal()
  const actionColumn: BasicColumn = {
    width: 160,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "详情",
        onClick: handleDetail.bind(null, record),
      },
    ],
    dropDownActions: (record: Recordable) => [
      {
        label: "重新对账",
        auth: Auth.refreshBillCheck,
        ifShow: () => record.status === "1",
        onClick: handleRefreshBillCheck.bind(null, record),
      },
      {
        label: "差异账单",
        ifShow: () => record.diffCount > 0,
        onClick: handleGoDiffPage.bind(null, record),
      },
    ],
  }

  const [registerTable, { reload }] = useTable({
    title: "对账批次",
    api: pageCheckBatch,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      return params
    },
    formConfig: {
      baseColProps: { lg: 6, md: 12 },
      labelWidth: 90,
      schemas: searchFormSchema,
      showResetButton: false,
      fieldMapToTime: [["billDate", ["beginDate", "endDate"], "YYYY-MM-DD"]],
    },
    showIndexColumn: false,
    showTableSetting: true,
    useSearchForm: true,
    pagination: true,
    canResize: true,
    rowKey: "batchNo",
    actionColumn,
  })

  const handleRefreshBillCheck = async (record) => {
    const key = "loading"
    // 后期可以改成消息通知的方式, 对账一般都比较耗时, 对账结束后通过消息推送到客户端
    createMessage.loading({
      content: "对账中.., 请耐心等待",
      key,
    })
    try {
      await refreshCheck({ batchNo: record.batchNo })
      createMessage.success("对账成功")
      reload()
    } finally {
      createMessage.destroy(key)
    }
  }
  const handleDetail = (record) => openFormDetail(true, { record })
  const handleGoDiffPage = (record) => {
    openCheckBillList(true, {
      title: `差异账单列表`,
      batchNo: record.batchNo,
      modalProps: {
        showOkBtn: false,
      },
    })
  }
</script>
